<template>
	<view class="userinfo-page">
		<view class="avatar-box">
			<u-avatar :text="avatarText" fontSize="28" shape="circle" :size="80" randomBgColor></u-avatar>
		</view>
		<view class="user-info-box">
			<u-cell-group>
				<u-cell size="large" title="姓名" :value="userInfo.name"></u-cell>
				<u-cell size="large" title="手机号" :value="userInfo.phone"></u-cell>
				<u-cell size="large" title="身份证号" :value="userInfo.idcard"></u-cell>
				<u-cell size="large" title="身份类型" :value="userInfo.typeName" :arrow="false" @click="editShow = true">
					<template #right-icon>
						<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<u-popup :show="editShow" mode="center" round="8">
			<view class="edit-box">
				<view class="edit-title">修改用户身份类型</view>
				<view class="edit-select">
					<u-cell size="large" title="身份类型" :value="editData.name" :arrow="false" @click="userTypeShow = true"></u-cell>
				</view>
				<view class="edit-btn">
					<u-button @click="handleCloseEdit"  :plain="true" text="取消" :customStyle="{ marginRight: '20px'} "></u-button>
					<u-button @click="handleSubmitEdit"  type="primary" text="保存修改"></u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :show="userTypeShow" :columns="[userTypeArr]" keyName="name" @cancel="userTypeShow = false" @confirm="handleUserTypeValue"></u-picker>
		
	</view>
</template>

<script>
	import { wxCodeGetUserInfo, userIDcardType, perfectUserInfo } from '../utils/methods.js'
	export default {
		onShareAppMessage(res) {
			return {
			  title: '石家庄不动产中心',
			  path: '/pages/index'
			}
		},
		data() {
			return {
				userTypeShow: false,
				editShow: false,
				avatarText: '',
				userInfo: {
					name: '',
					phone: '',
					idcard: '',
					typeName: '',
					type: ''
				},
				editData: {
					name: '请选择身份类型',
					id: ''
				},
				userTypeArr: []
			}
		},
		methods: {
			// 关闭修改
			handleCloseEdit() {
				this.editData = {
					name: '请选择身份类型',
					id: ''
				}
				this.editShow = false
			},
			// 保存修改
			handleSubmitEdit() {
				let reqData = { ...this.userInfo }
				reqData.userType = this.editData.id
				perfectUserInfo(reqData).then(res => {
					if(res.data.code == 0) {
						this.handleCloseEdit()
						uni.showToast({
							duration:2000,
							title: '修改成功',
							icon: 'success'
						})
						this.handleGetUserInfo()
					}
				})
			},
			handleUserTypeValue(value) {
				this.editData = value.value[0]
				this.userTypeShow = false
			},
			// 获取身份类型
			handleGetUserIdCardType() {
				userIDcardType().then(res => {
					if(res.data.code == 0) {
						this.userTypeArr = res.data.data
					}
				})
			},
			handleGetUserInfo() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						wxCodeGetUserInfo({code: loginRes.code}).then(Info => {
							if(Info.data.code == 0) {
								uni.setStorageSync('userTokenStr', Info.data.data.token)
								uni.setStorageSync('idCard', Info.data.data.idcard)
								uni.setStorageSync('type', Info.data.data.type)
								uni.setStorageSync('typeName', Info.data.data.typeName)
								this.userInfo = {
									name: Info.data.data.name,
									phone: Info.data.data.phone,
									idcard: Info.data.data.idcard,
									type: Info.data.data.type,
									typeName: Info.data.data.typeName,
								}
								this.avatarText = Info.data.data.name.substr(0, 1)
							}
						})
					}
				})
				
			},
		},
		mounted() {
			this.handleGetUserInfo()
			this.handleGetUserIdCardType()
		}
	}
</script>

<style lang="less">
	.userinfo-page {
		.avatar-box {
			padding: 100rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f9f9f9;
		}
		.user-info-box {
			
		}
		.edit-box {
			width: 650rpx; 
			padding: 0 20rpx; 
			box-sizing: border-box;
			.edit-title {
				font-size: 30rpx;
				font-weight: 600;
				width: 100%;
				text-align: center;
				margin: 20rpx 0;
			}
			.edit-select {
				margin-bottom: 20rpx;
			}
			.edit-btn {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 40rpx;
			}
		}
		
	}
</style>
